<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="resources/templates/mainTemplate.xhtml">
    
    <ui:param name="pagetitle" value="CHUMS - My Courses"/>
    
    <ui:define name="centerContent" class="turquaz"> 
        
        <p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();"/>  

        <p:dialog appendToBody="true" resizable="false" modal="true" widgetVar="statusDialog" header="Loading"   
                  draggable="false" closable="false">  
            <p:graphicImage value="resources/images/ajax-loader.gif" />
        </p:dialog> 
        
        <center>
            <h:form id="formMyCourses" prependId="false" >
                <p:fieldset legend="My Courses">  
                    <h:panelGrid columns="1"  cellpadding="10"> 
                        <p:growl id="growlMyCourses"  showDetail="true" showSummary="false" life="5000" redisplay="false" />  
                        <p:dataTable id="myCoursesTableID" 
                                     var="course" 
                                     value="#{userBean.myCourses}" 
                                     paginator="true" 
                                     rows="10"
                                     rowsPerPageTemplate="10,20,30"
                                     rowKey="#{course.id}"
                                     emptyMessage="No Rows"
                                     editable="false">

                            <p:ajax event="filter" listener="#{userBean.onFilterMyCourses}" update = ":formMyCourses:myCoursesTableID"/>

                            <f:facet name="header">
                                <h:outputText value="My Courses" />
                            </f:facet>

                            <p:column sortBy="#{course.id}" 
                                      headerText="ID" 
                                      width="40"
                                      filterBy="#{course.id}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="ID" />
                                </f:facet>

                                <h:outputText value="#{course.id}" />
                            </p:column>
                            
                            <p:column sortBy="#{course.url}" 
                                      headerText="URL" 
                                      width="60"
                                      filterBy="#{course.url}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="URL" />
                                    
                                </f:facet>

                                <h:outputLink id="url2" value="#{course.url}" target="_blank" >
                                    <h:outputText value="#{course.url}"/>
                                </h:outputLink>
                            </p:column>

                            <p:column sortBy="#{course.title}" 
                                      headerText="Title" 
                                      width="100"
                                      filterBy="#{course.title}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Title" />
                                </f:facet>

                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{course.title}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText id="title" value="#{course.title}"  style="width:100%">
                                        </p:inputText>
                                    </f:facet>  
                                </p:cellEditor>  
                            </p:column>
                            
                           

                            <p:column sortBy="#{course.description}" 
                                      headerText="Description" 
                                      width="100"
                                      filterBy="#{course.description}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Description" />
                                </f:facet>

                                <p:cellEditor>  
                                    <f:facet name="output">  
                                        <h:outputText value="#{course.description}" />  
                                    </f:facet>  
                                    <f:facet name="input">  
                                        <p:inputText  id="description" value="#{course.description}"  style="width:100%">
                                        </p:inputText>
                                    </f:facet>  
                                </p:cellEditor>  
                            </p:column>
                            
                            <p:column sortBy="#{course.averageRating}" 
                                      headerText="Average Rating" 
                                      width="60"
                                      filterBy="#{course.averageRating}"  
                                      filterMatchMode="contains"
                                      >

                                <f:facet name="header">
                                    <h:outputText value="Average Rating" />
                                </f:facet>

                                <h:outputText value="#{course.averageRating}" />
                            </p:column>

                            
                            <p:column headerText="Delete" 
                                      >  

                                <p:commandButton style="align: center"  icon="ui-icon-close"  update=":formMyCourses:myCoursesTableID :formMyCourses:growlMyCourses"
                                                 oncomplete="confirmation.show()">
                                    <f:setPropertyActionListener value="#{course}" target="#{userBean.toBeRemovedMyCourse}" />
                                </p:commandButton>

                            </p:column>  
                            
                            <p:column headerText="Detail" 
                                      >  

                               
                                
                                 <p:commandButton icon="ui-icon-search" update=":dialogID" oncomplete="webResourceDialog.show()" title="View Detail">  
                                <f:setPropertyActionListener value="#{course}" target="#{webResourceBean.selectedResult}" />  
                            </p:commandButton>  

                            </p:column>  
                            
                        </p:dataTable>

                    </h:panelGrid>  

                </p:fieldset>
            </h:form> 
            <p:confirmDialog appendToBody="true" id="confirmDialog" message="Are you sure you want to delete this course from your favorites?" header="Delete Course" severity="alert" widgetVar="confirmation">  
                <h:form>
                    <center>
                        <p:commandButton id="confirm" value="Yes" update=":formMyCourses:myCoursesTableID :formMyCourses:growlMyCourses" oncomplete="confirmation.hide();" action="#{userBean.removeMyCourse}" />  
                        <p:commandButton id="decline" value="No" onclick="confirmation.hide()" type="button" />   
                    </center>
                </h:form>
            </p:confirmDialog> 
            
            
            
            
            
            <p:dialog hideEffect="explode" style="z-index:10!important" appendToBody="true" header="Result Detail" resizable="false" width="700" height="800" widgetVar="webResourceDialog" modal="true" showEffect="fade">  
            <h:form id="dialogID">
               
                <p:growl id="dialogGrowl" showDetail="true" showSummary="false" life="5000" redisplay="false"  />
                <p:outputPanel id="webResourceDetail" style="text-align:center;" layout="block">  

                    <p:graphicImage value="resources/images/courseType#{webResourceBean.selectedResult.webResourceTypeId}.jpeg"/>  
                    
                    <h:panelGrid  columns="2" cellpadding="5">  

                       
                        
                        <h:outputLabel style="font-weight: bold" for="id" value="ID: " />  
                        <h:outputText id="id" value="#{webResourceBean.selectedResult.id}" />  

                        <h:outputLabel style="font-weight: bold" for="title" value="Title: " />  
                        <h:outputText id="title" value="#{webResourceBean.selectedResult.title}" />  

                        <h:outputLabel style="font-weight: bold" for="description" value="Description: " />  
                        <h:outputText id="description" value="#{webResourceBean.selectedResult.description}" />  

                        <h:outputLabel style="font-weight: bold" for="url" value="URL: " />
                        <h:outputLink id="url" value="#{webResourceBean.selectedResult.url}" target="_blank" >
                            <h:outputText value="#{webResourceBean.selectedResult.url}"/>
                        </h:outputLink>
                        
                        <h:outputLabel style="font-weight: bold" rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" for="instructors" value="Instructors: " />  
                        <h:outputText rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" id="instructors" value="#{webResourceBean.selectedResult.instructorsText}" />  

                        <h:outputLabel style="font-weight: bold" rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" for="institution" value="Institution: " />  
                        <h:outputText rendered="#{webResourceBean.selectedResult.webResourceTypeId eq 1}" id="institution" value="#{webResourceBean.selectedResult.institutionText}" />  

                        <h:outputLabel style="font-weight: bold" for="averageRating" value="Average Rating: " />  
                        <h:panelGroup>  
                            <p:rating id="averageRatingInt" value="#{webResourceBean.selectedResult.averageRatingInt}" readonly="true" />  
                            <h:outputText id="averageRating" value="(#{webResourceBean.selectedResult.averageRating})" />  
                            <h:outputText style="margin-left: 20px;" id="totalRatingCount" value="(#{webResourceBean.selectedResult.ratingCount} vote(s))" />  
                        </h:panelGroup>  
                        
                        <h:outputLabel style="font-weight: bold" for="insertDate" value="Added Date: " />  
                        <h:outputText id="insertDate" value="#{webResourceBean.selectedResult.insertDate}" />  

                        <h:outputLabel style="font-weight: bold" for="tags" value="Tags: " />  
                        <h:outputText id="tags" value="#{webResourceBean.selectedResult.tagsText}" />  

                        <h:outputLabel rendered="#{loginBean.loggedIn}" style="font-weight: bold" for="rate" value="Rate: " />  

                        <h:panelGroup rendered="#{loginBean.loggedIn}" >  
                            <p:rating id="rate" value="#{webResourceBean.rate}">  
                                <p:ajax event="rate" listener="#{webResourceBean.onRate}" update=":dialogID:dialogGrowl :dialogID:averageRating :dialogID:averageRatingInt :dialogID:totalRatingCount" />  
                                <p:ajax event="cancel" listener="#{webResourceBean.onRateCancel}" update=":dialogID:dialogGrowl :dialogID:averageRating :dialogID:averageRatingInt :dialogID:totalRatingCount" />  
                            </p:rating>
                        </h:panelGroup>
                        
                        <h:outputText id="tagThis" value="Tag this: " />  
                        <h:panelGroup>  
                            <p:inputText style="z-index: 20" id="tagThisText" value="#{webResourceBean.tagSuggestion}" />
                            <p:commandButton id="tagThisSubmit" value="Tag it!" update="tagThisText tags dialogGrowl" action="#{webResourceBean.addTag}"/>
                        </h:panelGroup>
                        
                        
                        <center>
                            <p:dataList rendered="#{not empty webResourceBean.selectedResult.lessons}" value="#{webResourceBean.selectedResult.lessons}" var="lesson" id="lessonTableID"  
                                    paginator="true" rows="20"  
                                    paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}"  
                                    rowsPerPageTemplate="10,20,30" type="none">  

                            <f:facet name="header">  
                                Lessons (#{webResourceBean.selectedResult.lessons.size()})
                            </f:facet>
                            <h:outputLink id="url" value="#{lesson.url}" target="_blank" >
                                <h:outputText value="#{lesson.title}" style="margin-left:10px" />  
                            </h:outputLink>
                            
                            <br />  
                            </p:dataList>  
                        </center>

                    </h:panelGrid>  


                    <p:dataTable id="webResourceCommentTableID" 
                                 var="comment" 
                                 value="#{webResourceBean.commentList}" 
                                 emptyMessage="No Rows"
                                 rowKey="#{comment.id}"
                                 editable="true"

                                 >
                        <p:ajax  event="rowEdit" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl" listener="#{webResourceBean.onEditCommentRow}"></p:ajax>

                        <f:facet name="header">
                            <h:outputText value="Comments" />
                        </f:facet>

                        <p:column sortBy="#{comment.time}" 
                                  headerText="Date" 
                                  >

                            <f:facet name="header">
                                <h:outputText value="Date" />
                            </f:facet>

                            <h:outputText id="commentTime" value="#{comment.time}" />
                        </p:column>


                        <p:column sortBy="#{comment.userText}" 
                                  headerText="User" 
                                  >
                            <f:facet name="header">
                                <h:outputText value="User" />
                            </f:facet>

                            <h:outputText id="commentUserText" value="#{comment.userText}" />
                        </p:column>

                        <p:column sortBy="#{comment.text}" 
                                  headerText="Comment" 
                                  >

                            <f:facet name="header">
                                <h:outputText value="Comment" />
                            </f:facet>

                            <p:cellEditor>  
                                <f:facet name="output">  
                                    <h:outputText value="#{comment.text}" />  
                                </f:facet>  
                                <f:facet name="input">  
                                    <p:inputText id="text" value="#{comment.text}"  style="width:100%"/>
                                </f:facet>  
                            </p:cellEditor>  
                        </p:column>

                        <p:column sortBy="#{comment.likeCount}" 
                                  headerText="Likes" 
                                  >

                            <f:facet name="header">
                                <h:outputText value="Likes" />
                            </f:facet>

                            <h:outputText id="commentLikeCount" value="#{comment.likeCount}" />
                        </p:column>


                        <p:column rendered="#{loginBean.loggedIn}" 
                                  headerText="Remove" 
                                  width="40">  

                            <p:commandButton rendered="#{webResourceBean.canUpdate(comment)}" style="align: center" icon="ui-icon-close" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                             actionListener="#{webResourceBean.removeComment(comment)}" />  

                        </p:column>

                        <p:column rendered="#{loginBean.loggedIn}" 
                                  headerText="Like">  

                            <p:commandButton process="@this" immediate="true" id="likeComment" rendered="#{webResourceBean.canLikeComment(comment)}" style="align: center" icon="ui-icon-heart" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                             actionListener="#{webResourceBean.likeComment(comment)}" />  
                            <p:commandButton process="@this" immediate="true" id="unlikeComment" rendered="#{!webResourceBean.canLikeComment(comment)}" style="align: center" icon="ui-icon-circle-minus" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                             actionListener="#{webResourceBean.unlikeComment(comment)}" />  

                        </p:column>



                    </p:dataTable>

                    <br/>
                    <br/>
                    <h:outputText rendered="#{loginBean.loggedIn}" value="New Comment" /><h:outputText value="  "/>
                    <p:inputText size="50" rendered="#{loginBean.loggedIn}" id="newCommentTextID" value="#{webResourceBean.newCommentText}"/><h:outputText value="  "/>
                    <p:commandButton process="@this newCommentTextID"  rendered="#{loginBean.loggedIn}" style="align: center" icon="ui-icon-circle-check" update=":dialogID:webResourceCommentTableID :dialogID:dialogGrowl"
                                     actionListener="#{webResourceBean.addComment}" />  





                </p:outputPanel>  
            </h:form>
        </p:dialog>  

        </center>
        
     
    </ui:define>
    
</ui:composition>

